﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <!-- Tell IE to use the latest version. -->
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

    <!-- This single-page Cesium application demonstrates the ability to request CZML from the server. -->
    <title>Example page for server-side CZML generation</title>

    <!-- For debugging client-side code, use the "Unminified" Cesium.js.  -->
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.66/Build/Cesium/Cesium.js"></script>
    <!--  <script src="https://cesium.com/downloads/cesiumjs/releases/1.66/Build/CesiumUnminified/Cesium.js"></script> -->
    <link rel="stylesheet" href="https://cesium.com/downloads/cesiumjs/releases/1.66/Build/Cesium/Widgets/widgets.css" />
    <style>
        body, #viewerContainer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            background: #000;
            color: #fff;
            font-family: sans-serif;
        }

        #message {
            position: absolute;
            top: 5px;
            left: 5px;
            right: 220px;
            color: #ddd;
            max-width: 480px;
            padding: 4px 10px;
            background: rgba(42, 42, 42, 0.8);
            border-radius: 7px;
        }
    </style>
</head>
<body>
    <div id="viewerContainer"></div>
    <div id="message">
        If the server is running correctly, you should see a globe with yellow dots.  The dots are
        generated by the server and transmitted as CZML to the browser.
    </div>
    <script>
        // TODO: Get your own Bing key from https://www.bingmapsportal.com/ and use it here, as the default one
        //       is likely to expire without warning. It is needed for both imagery and geocoding.  Alternately,
        //       you can select different imagery and disable the geocoder, so that Cesium does not require a Bing key.
        //Cesium.BingMapsApi.defaultKey = 'your key here';

        // The following line creates the Cesium viewer with all the default widgets on it.
        var viewer = window.viewer = new Cesium.Viewer('viewerContainer');

        // Create and load a CzmlDataSource with CZML data from the server, from URL 'info', which
        // is a route that we register in Global.asax.cs.
        viewer.dataSources.add(Cesium.CzmlDataSource.load('info'));

    </script>
</body>
</html>
